<template>
  <!-- 新增 卡面 组件 -->
  <zm-dialog
    :title="pTitle"
    :visible.sync="value"
    append-to-body
    :before-close="dialogClose"
    :close-on-click-modal="false"
    custom-width="1200px"
  >
    <el-form
      class="el_form"
      :model="form"
      ref="formRef"
      :rules="formRules"
      label-width="140px"
      label-position="right"
    >
      <el-form-item label="卡面名称：" prop="name">
        <zm-input v-model="form.name" placeholder="请输入卡面名称" class="w300" />
      </el-form-item>
      <zm-form-item label="卡面图片：" prop="image">
        <zm-image-upload class="image-preview" v-model="form.image" :limit="1"></zm-image-upload>
      </zm-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <el-button size="small" @click="dialogClose">取消</el-button>
      <zm-button size="small" type="primary" @click="submit('formRef')">
        确定
      </zm-button>
    </div>
  </zm-dialog>
</template>

<script>
import ZmImageUpload from '@/components/ZmUpload/components/ImageUpload.vue'
import cardSurface from '@/api/src/cardSurface'
import dialogMixin from '@/mixins/dialogMixin'
import uploadApis from '@/api/src/upload'
export default {
  components: { ZmImageUpload },
  mixins: [dialogMixin],
  props: {
    isApprove: {
      type: String,
      default: '0'
    },
    obj: {
      type: Object,
      default: {}
    },
    props: {
      type: Object,
      default() {
        return {
          label: 'name',
          value: 'id',
          children: 'accountData'
        }
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        image: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入卡面名称', trigger: 'blur' },
          { max: 10, message: '长度在 10 个字符以内', trigger: 'blur' }
        ],
        image: [{ required: true, message: '请上传卡面图片', trigger: 'change' }]
      }
    }
  },
  computed: {
    pTitle() {
      return this.obj.id ? '编辑' : '新增'
    }
  },
  created() {
    if (this.obj.id) {
      this.getInfo()
    }
  },
  methods: {
    async getInfo() {
      this.form = await cardSurface.getInfo({ id: this.obj.id })
    },
    submit(formRef) {
      this.$refs[formRef].validate(async (valid) => {
        if (valid) {
          if (this.obj.id) {
            await cardSurface.update({ ...this.form, id: this.obj.id })
          } else {
            await cardSurface.create(this.form)
          }
          this.$message.success(`${this.pTitle}卡面成功!`)
          this.$emit('refresh')
          this.dialogClose()
        } else {
          this.$message.error(`${this.pTitle}卡面失败!`)
          return false
        }
      })
    },
    onFileRemove() {
      this.form.cardImageUrl = ''
    },
    async fileUpload(data) {
      let params = new FormData()
      params.append('fileData', data.file)
      const res = await uploadApis.uploadFile(params)
      this.$set(this.form, 'enclosureUrl', res.url)
      this.$set(this.form, 'enclosureName', res.name)
      return res.url
    }
  }
}
</script>
<style lang="scss" scoped>
.el_form::v-deep .el-form-item__error {
  padding: 0;
}
.typeRadio::v-deep {
  .el-radio {
    margin-bottom: 15px;
    vertical-align: top;
  }
  .el-radio:first-child {
    margin-top: 10px;
  }
}
.tip-style {
  .el-icon-question {
    font-size: 14px;
  }
}
.image-preview {
  /deep/.is-success {
    width: 280px !important;
  }
}

</style>
